<template>
  <div class="release-wrapper">
    <Scroll class="release-scroll">
      <div class="inner">
        <div class="cover">
          <div class="cover-title">作品封面</div>
          <van-uploader
            v-model="coverFileList"
            :max-count="1"
            :after-read="coverAfterRead"
            @delete="handleCoverDelete"
          ></van-uploader>
        </div>
        <div class="name">
          <div class="title">作品名称</div>
          <div class="input-box">
            <input type="text" placeholder="添加标题" v-model="form.title" />
          </div>
        </div>
        <div class="intro">
          <div class="title">作品简介</div>
          <div class="input-box">
            <textarea placeholder="简单介绍一下您的作品。" v-model="form.content"></textarea>
          </div>
        </div>
        <div class="upload">
          <div class="title">上传图片</div>
          <div class="upload-box">
            <van-uploader
              v-model="caseFileList"
              :after-read="caseAfterRead"
              @delete="handleCaseDelete"
              multiple
              :max-count="12"
            ></van-uploader>
          </div>
          <span class="upload-tip">最多上传12张</span>
        </div>
        <div class="btn">
          <my-button name="保 存" @btnClick="submit" />
        </div>
      </div>
    </Scroll>
    <Tip class="release-tip" ref="releaseTip">
      <p>不能出现相关法律法规和政策</p>
      <p>禁止的语句哦～</p>
      <my-button name="确定" class="sure" />
    </Tip>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import Tip from '@/components/tip/tip'
import { upload, addWorks, editWorks } from '@/api/my'
import { getDesignerCaseDetail } from '@/api/home'
const ERR_OK = 200
export default {
  components: {
    Scroll,
    Tip
  },
  data () {
    return {
      coverFileList: [],
      caseFileList: [],
      form: {
        cover: '',
        content: '',
        title: '',
        images: []
      }
    }
  },
  created () {
    if (this.$route.query.id) {
      this._getDesignerCaseDetail(this.$route.query.id)
    }
  },
  methods: {
    submit () {
      // this.$refs.releaseTip.show()
      if (this.$route.query.id) {
        this.form.id = this.$route.query.id
        this._editWorks(this.form).then(res => {
          if (res.code === ERR_OK) {
            this.$emit('success')
            this.$router.back()
          }
        })
      } else {
        this._addWorks(this.form).then(res => {
          if (res.code === ERR_OK) {
            this.$emit('success')
            this.$router.back()
          }
        })
      }
    },
    handleCoverDelete (file) {
      this.form.cover = ''
    },
    handleCaseDelete (file, detail) {
      this.form.images.splice(detail.index, 1)
    },
    coverAfterRead (file, detail) {
      const formData = new FormData()
      formData.append('photo', file.file)
      this._upload(formData).then(res => {
        this.form.cover = res.data.photo
      })
    },
    caseAfterRead (files) {
      if (files instanceof Array) {
        files.forEach(file => {
          const formData = new FormData()
          formData.append('photo', file.file)
          this._upload(formData).then(res => {
            this.form.images.push(res.data.photo)
          })
        })
      } else if (files instanceof Object) {
        const formData = new FormData()
        formData.append('photo', files.file)
        this._upload(formData).then(res => {
          this.form.images.push(res.data.photo)
        })
      }
    },
    _upload (photo) {
      return upload(photo)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _addWorks ({ cover, content, title, images }) {
      return addWorks({ cover, content, title, images })
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast('添加成功~')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          this.$toast(err.data.message)
          console.log(err)
        })
    },
    _editWorks ({ id, cover, content, title, images }) {
      return editWorks({ id, cover, content, title, images })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getDesignerCaseDetail (id) {
      getDesignerCaseDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.form.cover = res.data.cover
            this.form.content = res.data.content
            this.form.title = res.data.title
            this.form.images = res.data.images
            this.coverFileList = [{ url: res.data.cover }]
            res.data.images.forEach((item, index) => {
              this.caseFileList.push({ url: item })
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-tip {
  font-size: 0.24rem;
  color: #ccc;
  display: block;
  margin-top: 0.2rem;
}
.release-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 0.21rem 0.36rem;
  box-sizing: border-box;
  touch-action: none;
  z-index: 11;
  .inner {
    padding-bottom: 1.5rem;
  }
  .release-scroll {
    width: 100%;
    height: 100%;
  }
  .cover {
    .cover-title {
      font-size: 0.32rem;
      line-height: 0.94rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
    }
    .van-uploader {
      width: 6.78rem;
      height: 3.8rem;
      background: url("../../../assets/images/sc.png") no-repeat;
      background-size: cover;
      /deep/.van-uploader__wrapper {
        width: 100%;
        height: 100%;
        .van-uploader__preview {
          margin: 0;
          width: 100%;
          height: 100%;
          .van-image {
            width: 100%;
            height: 100%;
            border-radius: 0;
            img {
              width: 100%;
            }
          }
        }
        .van-uploader__upload {
          width: 100%;
          height: 100%;
          margin: 0;
          background: none;

          input {
            width: 100%;
            height: 100%;
          }
          i {
            opacity: 0;
          }
        }
      }
    }
  }
  .name,
  .intro,
  .upload {
    margin-top: 0.5rem;
    .title {
      font-size: 0.32rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
      line-height: 0.76rem;
    }
    .input-box {
      width: 100%;
      height: 0.72rem;
      background: rgba(243, 243, 244, 1);
      font-size: 0;

      input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        padding: 0.24rem 0.34rem;
        box-sizing: border-box;
        background: #f3f3f4;
        color: #444;
        font: initial;
        font-size: 0.24rem;
        &::placeholder {
          font-size: 0.24rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
  .intro {
    .input-box {
      width: 100%;
      height: 2rem;
      textarea {
        width: 100%;
        height: 100%;
        background: #f3f3f4;
        font: initial;
        font-size: 0.24rem;
        border: none;
        outline: none;
        padding: 0.26rem 0.34rem;
        box-sizing: border-box;
        &::placeholder {
          font-size: 0.24rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
  .upload {
    .van-uploader {
      /deep/.van-uploader__wrapper {
        width: 100%;
        height: 100%;

        .van-uploader__preview {
          margin: 0;
          width: 2.06rem;
          height: 2.06rem;
          // border: 1px dashed #ccc;
          margin-right: 0.15rem;
          margin-bottom: 0.2rem;
          position: relative;
          i {
            font-size: 0;
            display: inline-block;
            width: 0.66rem;
            height: 0.66rem;
            position: absolute;
            right: 0;
            bottom: 0;
            top: auto;
            background: url("../../../assets/images/icon_sc.png") no-repeat;
            background-size: cover;
            border-radius: 0;
          }
          .van-image {
            width: 100%;
            height: 100%;
            border-radius: 0;
            img {
              width: 100%;
            }
          }
        }
        .van-uploader__upload {
          margin: 0;
          background: none;
          width: 2.06rem;
          height: 2.06rem;
          border-radius: 0;
          background: url("../../../assets/images/icon_scan.png") no-repeat;
          background-size: cover;
          input {
            width: 100%;
            height: 100%;
          }
          i {
            opacity: 0;
          }
        }
      }
    }
  }
  .btn {
    width: 5.26rem;
    height: 0.86rem;
    margin: 0 auto;
    margin-top: 1rem;
  }
  .release-tip {
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.46rem;
      text-align: center;
      &:nth-of-type(1) {
        margin-top: 0.6rem;
      }
    }
    .sure {
      margin-top: 0.3rem;
    }
  }
}
</style>
